<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="js/vue-2.6.12.js"></script>
	
</head>
<body>
<div id="app">
	<btn></btn>
	<btn></btn>
	<btn></btn>
	<btn></btn>
	<btn></btn>
	<btn></btn>
	<btn></btn>
</div>

<!--使用模板 定义组件的HTML 代码 -->
<template id="btn">
	<div>
		<button type="button" @click="addCount">点击了{{count}}次</button>
	</div>
	
</template>

<script>

<!--  定义组件对象-->
  let btn = {
    template: "#btn",
    data:function () {
      return {
        count:0,
    }
    },
    methods:{
      addCount(){
        this.count++;
      }
    }
    
    
    
  }
  
  
	
	let app=new Vue({
	  
	  el:"#app",
	  //注册组件
	  components:{
	   "btn":btn,
	  }
	  
	})
	
	
</script>

</body>
</html>